<!--
 * @Author: xuyonghua
 * @Date: 2021-12-23 15:09:30
 * @LastEditors: xuyonghua
 * @LastEditTime: 2022-01-11 18:08:15
 * @Description: file content
-->
<template>
  <div>
    <div class="reveal-top">
      <img
        src="http://g.hiphotos.baidu.com/image/pic/item/37d3d539b6003af37401eb21392ac65c1038b633.jpg"
        class="img"
      />
    </div>
    <div class="reveal-top">
      <img
        src="http://g.hiphotos.baidu.com/image/pic/item/37d3d539b6003af37401eb21392ac65c1038b633.jpg"
        class="img"
      />
    </div>
  </div>
</template>

<script>
import scrollReveal from "scrollreveal";
export default {
  name: "about",
  data() {
    return {
      scrollReveal: scrollReveal()
    };
  },
  mounted() {
    this.scrollReveal.reveal(".reveal-top", {
      // 动画的时长
      duration: 2000,
      // 延迟时间
      delay: 500,
      // 动画开始的位置，'bottom', 'left', 'top', 'right'
      origin: "top",
      // 回滚的时候是否再次触发动画
      reset: true,
      // 在移动端是否使用动画
      mobile: false,
      // 滚动的距离，单位可以用%，rem等
      distance: "200px",
      // 其他可用的动画效果
      opacity: 0.001,
      easing: "linear",
      scale: 0.9
    });
  },
  methods: {}
};
</script>
<style lang="less">
img {
  width: 500px;
  height: 500px;
}
</style>
